<script setup lang="tsx">
import { ref, unref, nextTick } from 'vue'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { ElTag, ElTree } from 'element-plus'
import { findIndex } from '@/utils'
import { getAllMenuTreeApi, getMenuListApi } from '@/api/menu'
import { useI18n } from '@/hooks/web/useI18n'
import { getRoleDetailApi } from '@/api/role'
import { Log } from '@/utils/logError'
import { buildMenuTree } from '@/utils/routerHelper'

const { t } = useI18n()

const props = defineProps({
  currentCode: {
    type: String,
    default: () => undefined
  }
})

const filterPermissionName = (value: string) => {
  const index = findIndex(unref(currentTreeData)?.permissionList || [], (item) => {
    return item.value === value
  })
  return (unref(currentTreeData)?.permissionList || [])[index].label ?? ''
}

const renderTag = (enable?: boolean) => {
  return (
    <ElTag type={!enable ? 'danger' : 'success'}>
      {enable ? t('common.enable') : t('common.disable')}
    </ElTag>
  )
}

const treeRef = ref<typeof ElTree>()

const currentTreeData = ref()
const nodeClick = (treeData: any) => {
  currentTreeData.value = treeData
}

const treeData = ref<any[]>([])
const getMenuList = async () => {
  try {
    const res = await getAllMenuTreeApi()
    treeData.value = buildMenuTree(res.data)
    console.log(treeData.value)
  } catch (error) {
    Log.error('getMenuList', error)
  }
}
getMenuList()

const roleDetailData = ref()

const getRoleDetail = async () => {
  try {
    const res = await getRoleDetailApi(props.currentCode || '')
    roleDetailData.value = res.data
  } catch (error) {
    Log.error('getRoleDetail', error)
  }
}
getRoleDetail()

const detailSchema = ref<DescriptionsSchema[]>([
  {
    field: 'name',
    label: t('role.name')
  },
  {
    field: 'code',
    label: t('role.code')
  },
  {
    field: 'status',
    label: t('common.status'),
    slots: {
      default: (data: any) => {
        return renderTag(data.status)
      }
    }
  },
  {
    field: 'createdAt',
    label: t('common.createTime')
  },
  {
    field: 'updatedAt',
    label: t('common.updateTime')
  },
  {
    field: 'remark',
    label: t('common.remark'),
    span: 24
  },
  {
    field: 'permissionList',
    label: t('role.menu'),
    span: 24,
    slots: {
      default: () => {
        return (
          <div class="flex w-full">
            <div class="flex-1">
              <ElTree
                ref={treeRef}
                node-key="id"
                props={{ children: 'children', label: 'title' }}
                highlight-current
                expand-on-click-node={false}
                data={treeData.value}
                onNode-click={nodeClick}
              >
                {{
                  default: (data) => {
                    return <span>{t(data.data.meta.title)}</span>
                  }
                }}
              </ElTree>
            </div>
          </div>
        )
      }
    }
  }
])
</script>

<template>
  <Descriptions :schema="detailSchema" :data="roleDetailData || {}" />
</template>
